<template>
	<view class="">
		<view class="tabs">
			<u-sticky bgColor="#fff">
				<u-tabs class="u_tabs" :current="current" :list="status" @click="tabStatus" lineWidth="60" lineColor="#e64340" :activeStyle="{
					    color: '#000',
					    fontWeight: 'bold',
					    transform: 'scale(1)'
					}" :inactiveStyle="{
					    color: '#606266',
					    transform: 'scale(0.9)'
					}" :scrollable=false itemStyle="height: 40px; width:20%;"></u-tabs>
			</u-sticky>
		</view>
		
		<view class="fg">

		</view>
		<view class="none" v-if="orderList.length==0">
			<u-empty mode="order" >
			</u-empty>
		</view>
		<view  v-else class="order-list">
			<view class="a-order" v-for="item in orderList" :key="item.id" @click="toOrder(item.id)">
				<view class="order-date">
					<view class="">
						康源生活
					</view>
					<view class="">
						{{item.status_text}}
					</view>
				</view>
				<view class="order_sn">
					订单编号：{{item.sn}}
				</view>
				<view>
					<view class="goodsinfo">
						<view class="goods_con" v-for="v in item.order_goods" >
							<view class="img-box">
								<image mode="aspectFill"
									:src="v.product_info.preview_img"
									class="goods-img"></image>
							</view>
							<view class="goods_text">
								<view class="goods_row">
									<view class="goods_name l">{{v.product_info.product_name}}</view>
									<view class="money r">
										￥<text class="money_num">{{v.sku_id>0?v.sku_price:v.mall_product_info.product_shop_price}}</text>
									</view>
								</view>
								<view class="goods_row row_b">
									<view class="teach_name l">
										{{v.sku_msg||''}}
									</view>
									<view class="num r">
										X{{v.buy_num}}
									</view>
								</view>
							</view>
							
						</view>
					</view>
					
					<view class="price-box" >
						<view  v-if="item.status== 1 || item.status== 0"class="total-price">应付款: <text class="price">￥<text style="font-size: 16px;">{{item.money_amount}}</text></text></view>
						<view  v-else class="total-price">
							实付款: <text class="price">￥<text style="font-size: 16px;">{{item.money_amount}}</text></text>
							<view v-if="item.jifen_amount">实付积分: <text style="color: red; font-weight: 700;">{{item.jifen_amount}}</text></view>
						</view>
					</view>
				
				</view>
				<view class="price-box">
					<block>
						<view @click.stop="ping(item.id)" class="btn" v-if="item.status==4">去评价</view>
						<view class="btn" v-if="item.status==3">查看物流</view>
						
						<view class="btn" v-if="item.status==3">确认收货</view>
						<view class="btn" v-if="item.status==2">申请退款</view>
						<view class="btn" v-if="item.status==1">取消订单</view>
						<view class="btn topay-btn" v-if="item.status==1">去付款</view>
					</block>
					
				</view>
			</view>
			<view class="zanwu" v-if="zanwu">暂无数据</view>
		</view>
		
	</view>
</template>

<script>
	import {orderList} from '@/api/order.js';
	export default {
		data() {
			return {
				page:1,
				num:10,
				statustext:'',
				status: [{
					name: "全部",
					id: 1
				}, {
					name: "待支付",
					id: 2
				}, {
					name: "待发货",
					id: 3
				}, {
					name: "待收货",
					id: 4
				}, {
					name: "待评价",
					id: 5
				}],
				orderList: [],
				current:0,
				zanwu:false,
				count:''
			}
		},
		onLoad(e) {
			console.log("触发")
			this.current = e.id-1;
			
		},
		onShow(){
			this.getList()
		},
		methods: {
			ping(e){
				uni.navigateTo({
					url:"/package/orderDetail/comments?order_id="+e
				})
			},
			getList(){
				console.log("触发了")
				if(this.current == 0){
					this.statustext = '';
				}else{
					this.statustext = this.current;
				}
				const data = {
					page:this.page,
					num:this.num,
					status:this.statustext
				}
				orderList(data).then(res=>{
					if(this.page==1){
						this.orderList =res.data.list
					}else{
						this.orderList = this.orderList.concat(res.data.list)
					}
					
					this.count = res.data.count;
				}).catch(err=>{
					console.log(err)
					uni.showToast({
						title:err.msg,
						icon:"none"
					})
				})
			},
			toOrder(e){
				console.log(e)
				uni.navigateTo({
					url:"/package/orderDetail/index?order_id="+e
				})
			},
			//点击切换
			tabStatus(item){
				console.log(item)
				this.current = item.index;
				this.orderList = [];
				this.page=1;
				this.zanwu = false;
				this.getList(item.id)
			},
			
		},
		//滚动加载
		onReachBottom(){
			let _this = this;
			if (_this.count <= _this.orderList.length) {
				this.zanwu = true;
				// uni.showToast({
				// 	title: '已加载全部数据',
				// 	icon: "none"
				// });
			} else {
				_this.page++;
				_this.getList()
			}
		
		},
	}
</script>

<style lang="scss">
	page {
		background: #f0f1f2;
	}
	.zanwu{
		width: 100%;
		text-align: center;
		color: #333;
		padding: 20rpx 0;
		
	}
	.fg {
		height: 10rpx;
		background-color: #f0f1f2;
	}
	.tabs{
		width: 100%;
		.u_tabs{
			width: 100%;
		}
	}
	/deep/.u-tabs__wrapper__nav{
		width: 100%;
		background-color: #fff;
	}
	.order-list {
		width: 100%;
		padding: 0 12px;
		box-sizing: border-box;
		.a-order {
			width: 100%;
			background-color: #fff;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 10px;

			.order-date {
				padding: 16px 30rpx 0;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #000000;
				align-items: center;
				// border-bottom: 1px solid #eee;
				.red {
		 		font-size: 26rpx;
					color: #e64340;
				}
			}
			.order_sn{
				padding: 0 30rpx;
				font-size: 12px;
				color: #aaa;
				margin-top: 4px;
			}

			.goodsinfo {
				// width: 720rpx;
				// border-top: 1rpx solid #eee;
				// border-bottom: 1rpx solid #eee;
				// display: flex;
				// align-items: center;
				padding:20rpx;
				.goods_con {
					display: flex;
					width: 100%;
					margin-top: 20rpx;
					.goods_text {
						font-size: 14px;
						flex: 1;
						.goods_row{
							display: flex;
							.l{
								flex: 1;
							}
							.goods_name{
								font-size: 14;
							}
							.money{
								.money_num{
									font-size: 14px;
								}
							}
							.teach_name{
								font-size: 12px;
							}
							.num{
								font-size: 12px;
								color: #999;
							}
						}
						.row_b{
							margin-top: 20px;
						}
					}

					.img-box {
						margin-right: 8px;
						width: 105px;
						min-width:105px;
						height: 83px;
						overflow: hidden;
						margin-right: 30rpx;
						background-color: #f7f7f7;
						border-radius: 5px;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.goods-des {
					width: 540rpx;
					height: 64rpx;
					line-height: 39rpx;
					font-size: 26rpx;
					color: #000000;
					overflow: hidden;
				}
			}

			.price-box {
				position: relative;
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				padding: 20rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 26rpx;
				box-sizing: border-box;
				
				.total-price {
					font-size: 24rpx;
					text-align: right;
					.price {
						font-weight: 700;
					}
				}

				.btn {
					width: 166rpx;
					height: 60rpx;
					box-sizing: border-box;
					text-align: center;
					line-height: 60rpx;
					border-radius: 30rpx;
					margin-left: 20rpx;
					border: 1rpx solid #ccc;
				}
				.pricetext{
					height: 60rpx;
					line-height: 60rpx;
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					color: #e64340;
				}
				.cancel-btn {
					border: 1rpx solid #ccc;
					position: absolute;
					right: 216rpx;
					top: 20rpx;
				}

				.topay-btn {
					border: 1px solid #ff0000;
					color: #ff0000;
				}
			}
		}
	}

	.goods-img-container {
		width: 720rpx;
		margin-left: 30rpx;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
		padding: 30rpx 0 0;
		display: flex;
		align-items: center;
		height: 180rpx;
		box-sizing: border-box;
		white-space: nowrap;

		.img-box {
			width: 120rpx;
			height: 120rpx;
			overflow: hidden;
			margin-right: 20rpx;
			background-color: #f7f7f7;
			display: inline-block;

			.goods-img {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
</style>
